<template>
	<view>
		<luyj-tree v-slot:default="{item}" :checkList="checkList" :props="prop" @clickItem="clickItem" @sendValue="confirm" :parent="true"
			 :is-check="false" :trees="carList" check-active-color="#1573FF">
			<!-- 内容插槽 -->
			<view>
				<view class="content-item">
					<image class="logo" v-if="item.logo" :src="item.logo" mode="widthFix"></image>
					<view class="word">{{item.name}}</view>
				</view>
			</view>
		</luyj-tree>
	</view>
</template>

<script>
	import {apiCarModelList} from '@/api/car-api.js'
	import settings from '@/settings.js'
	export default {
		data() {
			return {
				brandId : '',
				brandName: '',
				seriesId : '',
				seriesName: '',
				modelId : '',
				modelName: '',
				prop:{ //单选模式
					label: 'name',
					children: 'children',
					multiple: false,
					nodes: true
				},
				carList : []
				
			}
		},
		computed: {
			carInfo() {
				return this.brandName + '/' + this.seriesName + '/' + this.modelName;
			}
		},
		onLoad() {
          this.getData();
		},
		methods: {
			
			getData(){
				apiCarModelList().then(res=> {
					res.data.forEach((item) => {
						item.logo = settings.baseImageUrl + item.logo;
					})
					this.carList = res.data;
				})
			},
			
			clickItem(e) {
				if(e.logo) {//品牌
				    this.brandId = e.id;
					this.brandName = e.name;
				}else if(e.children) {//车系
				    this.seriesId = e.id;
				    this.seriesName = e.name;	
				}else {
					this.modelName = e.name;
					this.modelId = e.id;
					var car = {
						brandId : this.brandId,
						brandName : this.brandName,
						seriesId : this.seriesId,
						seriesName : this.seriesName,
						modelId: this.modelId,
						modelName: this.modelName,
						carInfo: this.carInfo
					}
					uni.$emit('chooseCarInfo', car);
					uni.navigateBack({
					
					})
				}
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	
	.content-item {
		display: flex;
		position: relative;
		align-items: center;
	     .logo {
			 width: 100rpx;
			 height: 50rpx;
		 }
		.word {
			margin-left: 16rpx;
			font-size: 30rpx;
			color: #5b5757;
			width: auto;
			// word-break: break-all;
		}
	}
</style>
